<template>
	<view class="content">
		<el-button style="margin-bottom: 20upx;" @click="close">返回</el-button>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="标题" prop="title">
				<el-input v-model="ruleForm.title" style="width: 300px;" placeholder="写个标题瑟"></el-input>
			</el-form-item>
			<el-form-item label="类型" prop="subType">
				<el-select v-model="ruleForm.subType" style="width: 300px;" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.name">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="描述" prop="desc">
				<el-input v-model="ruleForm.desc" style="width: 300px;" placeholder="描述一哈"></el-input>
			</el-form-item>
			<el-form-item label="封面图" prop="desc">
				<uploadImage :imgUrl.sync="imgUrl"></uploadImage>
			</el-form-item>
			<el-form-item label="内容" prop="content" style="width: 60%;">
				<tinymce v-model="ruleForm.content" :height="300" />
			</el-form-item>
			<el-form-item>
				<el-button v-if="type != 'edit'" type="primary" @click="add('ruleForm')">保存</el-button>
				<el-button v-if="type == 'edit'" type="primary" @click="update()">修改</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</view>
</template>

<script>
	import Tinymce from '../../../components/Tinymce'
	import uploadImage from "../../../components/uploadImage/uploadImage.vue"
	export default {
		components: {
			Tinymce,
			uploadImage
		},
		data() {
			return {
				imgUrl: "",
				id: '',
				options: [],
				ruleForm: {
					title: "", // 标题
					subType: "", // 类型
					desc: "",
					content: "写点东西...",
				},
				pageIndex: 1,

				type: "",
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					subType: [{
						required: true,
						message: '请输入类型',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入类型',
						trigger: 'blur'
					}],
					desc: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					}]
				},
			};
		},
		onLoad(opction) {
			if (opction.type == 'edit') {
				this.type = opction.type
				this.get(opction.Id)
				this.id = opction.Id
			}
		},
		created() {
			this.getType()
		},
		methods: {
			imgChange(value) {
				console.log(value)
			},
			async getType() {
				return await uniCloud.callFunction({
					name: 'get',
					data: {
						tableName: 'blogs-type',
						pageIndex: this.pageIndex, //第几页
						pageSize: 20 //每页的记录条数
					}
				}).then(res => {
					this.options = res.result.data
					return res.result.data
				})
			},
			// 获取列表
			async get(Id) {
				this.loading = true
				return await uniCloud.callFunction({
					name: 'query',
					data: {
						tableName: "blogs-List",
						id: Id
					}
				}).then((res) => {
					console.log(res)
					var data = res.result.data[0]
					this.imgUrl = data.img
					this.ruleForm = data
					console.log(this.ruleForm, '123')
					this.loading = false
					return res.result.data
				}).catch((err) => {
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			// 修改数据
			async update() {
				uni.showLoading({
					title: '处理中...'
				})
				return await uniCloud.callFunction({
					name: 'update',
					data: {
						tableName: 'blogs-List',
						id: this.id,
						title: this.ruleForm.title,
						subType: this.ruleForm.subType,
						updateTime: Date.now(),
						content: this.ruleForm.content,
						desc: this.ruleForm.desc,
						img: this.imgUrl
					}
				}).then((res) => {
					uni.hideLoading()
					this.$notify({
						title: '提示',
						message: '修改成功',
						type: 'success'
					});
					uni.redirectTo({
						url: './blogs'
					})
					return res.result.msg
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `更新操作执行失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			// 新增
			add(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						uni.showLoading({
							title: '处理中...'
						})
						return await uniCloud.callFunction({
							name: 'add',
							data: {
								tableName: 'blogs-List',
								title: this.ruleForm.title,
								subType: this.ruleForm.subType,
								createTime: Date.now(),
								content: this.ruleForm.content,
								desc: this.ruleForm.desc,
								img: this.imgUrl,
								data: {
									pinglun: []
								}
							}
						}).then((res) => {
							uni.hideLoading()
							this.$notify({
								title: '提示',
								message: '添加成功',
								type: 'success'
							});
							uni.redirectTo({
								url: './blogs'
							})
							return res.result.id
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								content: `添加数据失败，错误信息为：${err.message}`,
								showCancel: false
							})
							console.error(err)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			close() {
				uni.redirectTo({
					url: './blogs'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	[v-cloak] {
		display: none;
	}

	.content {
		width: 100%;
		padding: 20upx;

		.img {
			max-width: 400upx;
			max-height: 400upx;
			margin-right: 20upx;
		}
	}
</style>
